<template>
  <div class="container">
    <div style="margin-top: 20px;">
      <img class="img"
        src="https://img1.baidu.com/it/u=380622857,2709733589&fm=253&fmt=auto&app=138&f=JPEG?w=659&h=659" />
    </div>
    <!-- <Button class="login_content__btn" open-type="getPhoneNumber"  @getphonenumber="getPhoneNumber" >手机号授权登录</Button> -->
    <Button class="login_content__btn" @click="login" >手机授权登录</Button>
  </div>

</template>

<script setup>
  import { ref } from 'vue'
  import Taro from '@tarojs/taro'
  import { wxLogin } from '../../api/index'

  const login = () => {
    Taro.login({
      success: (wx) => {
        console.log('看登录', wx)
        if (wx.code) {
          wxLogin({code:wx.code}).then(res => {
          const userInfo = res.data.data;
          if (!res.data.success) {
            Taro.showToast({ title: res.data.msg || '登录异常', icon: 'none' })
            return
          }
          Taro.showToast({ title: '登录成功', icon: 'success' })
          Taro.setStorageSync("loginData", userInfo);
          // 登录成功，跳转首页
          Taro.switchTab({ url: '/pages/index/index' })
        })} else {
          console.log('登录失败！' + wx.errMsg)
        }
      }
    })
  }
  
</script>

<style>
  page {
    background: linear-gradient(to bottom, #fcd4ca, #feb47b, #a7e0ec, #f6c1cb);
  }
  .img {
    width: 100%;
    height: 550px;
  }
  .login_content__btn {
      text-align: center;
      width: 500px;
      height: 92px;
      line-height: 92px;
      margin-top: 40px;
      border-radius: 80px;
      font-size: 32px;
      margin-bottom: 60px;
      background-color: #ee8b3f;
      color: #fff;
  }
</style>